import React, { useState, useEffect } from 'react'
//函数组件事件绑定 赋值  
export default function Ok_hook(props) {
    const [count, setCount] = useState(123)
    // const [name, setNaame] = useState('abc')
    const [tc, setTc] = useState({ name: 'MICK', age: 10 })
    // --------------------------------------
    //获取复杂initiaState 
    // const [number1, setNumber1] = useState(() => {
    //     if (props.number1 > 2) {
    //         return props.number1 - 1
    //     } else {
    //         return props.number1 + 1
    //     }
    // })
    useEffect(() => {
        console.log(count);
    }, [count])
    // useEffect(() => {
    //     console.log('开始监听');
    //     return () => {
    //         console.log("先取消监听");
    //     }
    // })

    const handleClick = () => {
        setCount(() => {
            if (count >= 100) {
                return count - 10
            } else {
                return count + 1
            }
        })
    }
    // 修改引用类型
    const handleClick2 = () => {
        setTc(() => {
            return {
                ...tc,
                name: 'xiaoming'
            }

        })


    }
    return (
        <div>
            {count}
            {/* 绑定函数式修改 */}
            <button onClick={handleClick}>change</button>
            {/* 直接修改 */}
            {/* <button onClick={() => { setCount(count - 1) }}>title</button> */}
            <br />
            {tc.name}
            <br />
            {tc.age}
            <button onClick={handleClick2}>changeName</button>
            {/* <p>{number1}</p> */}
            {/* <button onClick={() => { setNumber1(number1 + 1) }}>number</button> */}

        </div>
    )
}
